<template>
	<view class="search-wrap">
		<view class="search-block">
			<u-input clearable :placeholder="placeholder" @clear="clearHandler" class="search-input" :placeholderStyle="holderStyle" :customStyle="customStyle" v-model="content" border="none">
				<template slot="prefix">
					<u--image style="padding-left: 8rpx;" height="34rpx" width="34rpx" src="/static/images/ui/bg/search.png"></u--image>
				</template>
				<template slot="suffix" v-if="!searched">
					<view @tap="onTap" class="search-btn">搜索</view>
				</template>
			</u-input>
			<view @click="clearHandler" v-if="searched" class="ml-2">取消</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"bg-search",
		props:["placeholder"],
		data() {
			return {
				searched:false,
				content:"",
				holderStyle:"fontSize:24rpx;marginLeft:12rpx;",
			};
		},
		methods:{
			onTap(){
				this.searched = true
				this.$emit("search", this.content)
			},
			clearHandler(){
				this.content = ""
				this.searched = false
				this.$emit("search", '')
			}
		}
	}
</script>

<style scoped>
.search-wrap {
	min-height: 114rpx;
	background: #ffffff;
	padding: 24rpx 0;
	box-sizing: border-box;
}
.search-block {
	display: flex;
	align-items: center;
	padding: 0rpx 24rpx 0 24rpx;
	/* background: #f8f7f5;
	border-radius: 34rpx; */
	min-height: 66rpx;
}
.search-input {
	background: #f8f7f5;
	border-radius: 34rpx;
	min-height: 66rpx;
}

.search-btn {
	width: 54px;
	height: 27px;
	background: #ee3636;
	border-radius: 14px;
	color: #ffffff;
	text-align: center;
	font-size: 24rpx;
	line-height: 54rpx;
}
</style>